<template>
	<view>
		<view class="content">
			<!-- <u-sticky style="position: fixed;top: 0;z-index: 100;"> -->
				<u-navbar :is-back="true" :title="title" title-color="#000" :border-bottom="false">
				</u-navbar>
			<!-- </u-sticky> -->
			<view class="main">
				<scroll-view class="mainNav" scroll-x="true" :scroll-left="scrollLeft" style="white-space: nowrap;">
					<view class="mainNavItem" @click="onMainNav(item,index)"
						:style="mainNavIndex == index ? 'border-bottom: 6rpx solid #1B9CFF;color: #1B9CFF' : ''"
						v-for="(item,index) in NavList" :key="index">
						{{item.name}}
					</view>
				</scroll-view>
				<!-- <view class="mainNav2">
					<view class="mainNav2_item" @click="show = true">
						<span class="mainNav2_item_nr">{{cityName}}</span>
						<view class="mainNav2_sjx"></view>
					</view>
				</view> -->
				<view class="mainTable">
					<view class="mainTable_topTitle">
						<view class="mainTable_topTitle_ble"></view>
						<view class="mainTable_topTitle_name">
							{{mainTableTitle}}
						</view>
					</view>
					<view class="mainTableNr">
						<view class="tableTh">
							<span class="tableData_topTitle" style="width: 100rpx;">地市</span>
							<span class="tableData_topTitle">区县</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 0">宽带用户原因退单量</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 0">家宽网络原因退单量</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 0">家宽前台原因退单量</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 1">FTTR用户原因退单量</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 1">FTTR网络原因退单量</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 1">FTTR前台原因退单量</span>
							<span class="tableData_topTitle" v-if="mainNavIndex == 2">商客宽带退单量</span>
						</view>
						<view class="tableTd"
							:style="{height: isHig4 && dedicatedLineDataList.length > 3 ?  '450rpx' : '' }">
							<view v-if="dedicatedLineDataList.length>0" :class="getRowClass(index)"
								v-for="(item, index) in dedicatedLineDataList" :key="index">
								<span class="tableData_bomTitle" style="width: 100rpx;">{{ item.City }}</span>
								<span class="tableData_bomTitle">{{ item.County || '-' }}</span>
								<span v-if="mainNavIndex != 2" class="tableData_bomTitle" style="color: #1B9CFF;"
									@click="goDetails1(item)">{{mainNavIndex == 0? item.KdyhyyNum :item.FttryhyyNum}}</span>
								<span v-if="mainNavIndex != 2" class="tableData_bomTitle" style="color: #1B9CFF;"
									@click="goDetails1(item)">{{ mainNavIndex == 0? item.KdwlyyNum :item.FttrlwyyNum}}</span>
								<span v-if="mainNavIndex != 2" class="tableData_bomTitle" style="color: #1B9CFF;"
									@click="goDetails1(item)">{{mainNavIndex == 0?  item.KdqtyyNum :item.FttrqtyyNum}}</span>
								<span v-if="mainNavIndex == 2" class="tableData_bomTitle" style="color: #1B9CFF;"
									@click="goDetails1(item)">{{item.QkttNum}}</span>

							</view>
							<view class="tableTdNull" v-if="dedicatedLineDataList.length == 0">
								无
							</view>
						</view>
						<view class="gengduo" @click="onGD4()" v-if="isHig4 && dedicatedLineDataList.length > 3">
							展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm" :default-value="defaultlist"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultlist: [0],
				title: '有线装维',
				cityName: '',
				NavList: [{
						name: '整体退单量'
					},
					{
						name: 'FTTR退单量'
					},
					{
						name: '商客宽带退单量'
					},
				],
				scrollLeft: 0,
				mainNavIndex: 0,
				mainTableTitle: '',
				dedicatedLineDataList: [],
				isHig4: false,
				show: false,
				list: [],
				mainNavName: ''
			}
		},
		mounted() {
			let type = this.$route.query.type
			this.mainNavIndex = type
			this.cityName = this.$route.query.cityName
			this.mainTableTitle = '有线装维' + '-' + this.NavList[type].name + '-' + this.cityName
			// 获取所有地市下拉框
			// this.getcity()
			this.getcountyData()
		},
		methods: {
			// async getcity() {
			// 	let data = await this.$api.getcity();
			// 	if (data.Code == 200) {
			// 		this.list = data.Data.map(item => {
			// 			return {
			// 				value: item.ID,
			// 				label: item.Name
			// 			}
			// 		})
			// 		const index = this.list.findIndex(item => item.label === this.cityName);
			// 		this.defaultlist[0] = index
			// 	} else {
			// 		uni.showToast({
			// 			title: data.Message,
			// 			icon: 'none',
			// 			duration: 5000,
			// 			mask: true,
			// 		});
			// 	}
			// },
			//获取区县统计数据
			async getcountyData() {
				let type = this.mainNavIndex + 1
				let parmes = `?city=${this.cityName}&type=${type}`
				let data = await this.$api.getcountyData(parmes);
				if (data.Code == 200) {
					this.dedicatedLineDataList = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			onMainNav(item, index) {
				console.log()
				this.mainNavIndex = index
				this.mainNavName = item.name
				this.mainTableTitle = '有线装维' + '-' + item.name + '-' + this.cityName
				this.getcountyData()
			},
			confirm(e) {
				console.log(e, 'e')
				this.cityName = e[0].label
				this.mainTableTitle = '有线装维' + '-' + (this.mainNavName || this.NavList[0].name) + '-' + this.cityName
				this.getcountyData()
				// 添加默认值
				this.defaultlist = [this.list.map(item => item.label).indexOf(this.cityName)]
			},
			getRowClass(index) {
				// 检查行号是否为奇数（长度为1、3、5等）
				if (index % 2 !== 0) {
					return 'odd-row tableTr';
				}
				return 'tableTr';
			},
			// 点击数量下钻
			goDetails1(item) {
				this.$router.push({
					path: '/pagesJK/indicator/components/details1',
					query: {
						city: item.City,
						county: item.County,
						mainNavIndex: this.mainNavIndex
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.content {
		height: 100vh;
		overflow: hidden;
	}

	.main {
		width: 100%;
		min-height: calc(100vh - 88rpx);
		background: #F5F6F7;
		margin-top: 88rpx;
		display: block;

		.mainNav {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 90rpx;
			background-color: #fff;
			border-top: 1px solid #F0F1F2;

			.mainNavItem {
				width: 33%;
				text-align: center;
				display: inline-block;
				line-height: 84rpx;
				font-size: 30rpx;

				color: #A7ABBB;
			}
		}
		.mainNav2 {
			width: 750rpx;
			height: 86rpx;
			background: #EEF4FC;
			border: 1rpx solid #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 24rpx;

			.mainNav2_item {
				padding: 12rpx 34rpx;
				background: #FFFFFF;
				font-size: 26rpx;
				border-radius: 30rpx;
				border: 1rpx solid #F1F1F1;
				display: flex;
				align-items: center;
			}

			.mainNav2_sjx {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				/* 左边框透明 */
				border-right: 10rpx solid transparent;
				/* 右边框透明 */
				border-top: 18rpx solid #000;
				/* 上边框有颜色，形成三角形 */
				margin-left: 26rpx;
			}
		}

		.mainTable {
			width: 750rpx;
			background: #FFFFFF;

			.mainTable_topTitle {
				height: 98rpx;
				display: flex;
				align-items: center;

				.mainTable_topTitle_ble {
					margin-left: 34rpx;
					margin-right: 22rpx;
					width: 8rpx;
					height: 30rpx;
					background: #1B9CFF;
					border-radius: 4rpx;
				}

				.mainTable_topTitle_name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}
			}

			.mainTableNr {
				width: 710upx;
				border-radius: 20upx 20upx 0 0;
				overflow: hidden;
				position: relative;
				margin: 0 auto;
				background-color: #fff;

				.tableTh {
					width: 710rpx;
					height: 103rpx;
					background: #F2F5F8;
					box-shadow: inset 0rpx 10rpx 6rpx 1rpx rgba(108, 148, 182, 0.2);
					border: 1rpx solid #A4B8D3;
					border-radius: 20upx 20upx 0 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					overflow: hidden;
					position: absolute;
					top: 0;

					.tableData_topTitle {
						width: 140rpx;
						text-align: center;
						display: block;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #2654B0;
					}
				}

				.tableTd {
					padding: 100upx 0 0;
					height: calc(100vh - 400rpx);
					overflow: auto;

					.tableTr {
						padding: 10upx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 8rpx;
					}

					.tableData_bomTitle {
						width: 140rpx;
						text-align: center;
						height: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #5F6475;
						line-height: 24px;
						display: block;
						font-style: normal;
						text-transform: none;
						padding: 5upx 0;
					}
				}

				.gengduo {
					width: 709upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #F1F6FF;
					position: absolute;
					bottom: 0;
					left: 0;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #2654B0;

					.icon_arrow_down {
						width: 24upx;
						height: 12upx;
						margin-left: 13upx;
					}
				}

				.tableTdNull {
					width: 100%;
					text-align: center;
					margin: 40rpx auto;
					font-size: 28rpx;
					color: #5F6475;
				}
			}

		}
	}

	.odd-row {
		background: #F1F6FF;
	}
</style>